<template>
	<view class="container" >
		<uni-nav-bar left-text="微信" backgroundColor="#eee" class="nav">
			<view slot="right">
				<uni-icons class="icon-search" type="search"></uni-icons>
				<uni-icons ref="plusBtn" class="icon-search" type="plus" @click="open"></uni-icons>
			</view>
		</uni-nav-bar>
		<popups 
		:x="x" 
		:y="y" 
		v-model="isShow" 
		:popData="popData" 
		@tapPopup="tapPopup"
		theme="dark"
		dynamic
		:styles="{width: '240rpx'}"></popups>
		
		<u-row v-for="item in sessions" class="msg-wrap" @click="onChat(item.id)">
		  <u-avatar :src="item.avatar" mode="square"></u-avatar>
		  <view class="msg">
		    <view class="nick">{{item.alias}}</view>
		    <view v-if="item.lastMsg.type=='text'" class="text" v-html="item.lastMsg.text"></view>
			<view v-else-if="item.lastMsg.type=='notification'" class="text" >{{item.showText}}</view>
			<view v-else-if="item.lastMsg.type=='image'" class="text" >[图片]</view>
		  </view>
		  <view class="notify">
		    <view class="time">{{util.formatDate(item.lastMsg.time, false)}}</view>
		    <uni-badge :text="item.unread" type="error"></uni-badge>
		  </view>
		</u-row>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import util from '../../utils/index.js'
	import popups from '../../components/popups.vue'
	
	export default {
		components: {
			popups
		},
		data() {
			return {
				x: 0,
				y: 0,
				isShow: false,
				popData: [{
					title: '发起群聊'
				},{
					title: '添加好友'
				}],
				util
			}
		},
		computed: {
		  ...mapState({
		    sessions: (state) => {
		      return state.app.sessions.map((item) => {
				  let userInfos = {}
				  state.app.userInfos.map((it) => {
					  if (it.account == item.to)
						userInfos = it;
				  })
		          
				  if(item.scene == 'p2p') {
					  return {
					    ...item,
					    avatar: userInfos.avatar,
					    alias: userInfos.nick || userInfos.account
					  }
				  } else if(item.scene == 'team') {
					  let userInfos = {}
					  if(item.lastMsg.type == 'notification') {
						  
						  if (item.lastMsg.attach.type == 'updateTeam') {
							  item.showText = `${item.lastMsg.fromNick}修改了群聊名为${item.lastMsg.attach.team.name}`
						  } else {
							  const { accounts } = item.lastMsg.attach
							  const accountStr = accounts.join('、');
							  item.showText = `${item.lastMsg.fromNick}邀请${accountStr}加入了群聊`
						  }  
					  }
					  userInfos = state.app.teamInfos[item.to]
					  
					  return {
					    ...item,
					    avatar: userInfos.avatar,
					    alias: userInfos.name
					  }
				  } 

		        })
		    }
		  })
		},
		mounted() {
			const plusBtn = this.$refs.plusBtn.$el.getBoundingClientRect()
			this.x = plusBtn.left + 5
			this.y = plusBtn.top + 30
		},
		methods: {
			onChat(sessionId) {
				uni.navigateTo({
					url: '/pages/index/chat?id=' + sessionId
				})
			},
			open () {
				this.isShow = !this.isShow
			},
			tapPopup (obj) {
				if(obj.title == '添加好友') {
					uni.navigateTo({
					    url: '/pages/index/searchUser'
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		font-size: 14px;
		line-height: 24px;
	}
	.nav {
		padding: 0 20rpx;
		background-color: rgb(238, 238, 238);
	}
	.iconbiaoqing {
		font-size: 20px;
		color: red;
	}
	.icon-search {
		margin-right: 20rpx
	}
	.msg-wrap {
	  padding: 20rpx 30rpx;
	  border-bottom: 1px solid #eee;
	  .nick {
	    margin-left: 20rpx;
	    font-size: 32rpx;
	  }
	  .text {
	    width: 100%;
	    height: 48rpx;
	    margin-left: 20rpx;
	    color: #666;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    word-break: break-all;
	  }
	}
	.msg {
	  width: 100%;
	  flex: 1;
	  overflow: hidden;
	}
	.notify {
	  display: flex;
	  flex-direction: column;
	  align-items: flex-end;
	}
	.time {
	  width: 150rpx;
	  color: #999;
	  text-align: right;
	  font-size: 24rpx;
	}
</style>
